<template>
  <div class="select-tree-component">
    <FormItemView :selecting="selecting" :value="value.content" @click="handleOpen" />

    <template v-if="selecting">
      <sms-template-select
        visible
        :title="title"
        :value="value"
        @close="selecting = false"
        @submit="handleSubmit"
      />
    </template>
  </div>
</template>

<script>
import SmsTemplateSelect from './template'
import FormItemView from '@/components/FormItemView'
export default {
  name: 'SmsTemplateView',
  components: { SmsTemplateSelect, FormItemView },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    optionList: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: () => '请选择'
    },
    title: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      selecting: false
    }
  },
  methods: {
    handleOpen() {
      this.$data.selecting = true
    },
    handleSubmit(e) {
      this.$emit('input', e)
      this.$emit('change', e)
      this.$data.selecting = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
